<style lang="scss" scoped>
.chart {
    height: 100%;
}
</style>

<template>
<div ref="refChart" class="chart"></div>
</template>

<script setup>
// import ChartV3 from '../../../components/ChartV3.vue'
import { ref, shallowReactive, onMounted } from 'vue'
import { MyChart } from '../../../components/MyChart.js'
import * as echarts from 'echarts/core'
import { color } from 'echarts'
import { pad } from 'lodash'
const refChart = ref()
let mc = null
onMounted(() => {
    mc = new MyChart(refChart.value)
    mc.setOption(chart.getBaseOption())
    mc.drawChart(
        [
            ['date', 'value'],
            ['00:00', 18],
            ['02:00', 17],
            ['04:00', 16],
            ['06:00', 16],
            ['08:00', 19],
            ['10:00', 22],
            ['12:00', 25],
            ['14:00', 27],
            ['16:00', 26],
            ['18:00', 24],
            ['20:00', 21],
            ['22:00', 19]
        ]
        // 0-30%VOL
    )
})

const chart = {
    data: [],
    getBaseOption() {
        return {
            // title: {
            //     text: '24小时温度变化曲线',
            //     subtext: '单位：摄氏度(℃)',
            //     left: 'center'
            // },
            tooltip: {
                trigger: 'axis',
                formatter: '{b}<br/>{a0}: {c0}℃',
                axisPointer: {
                    animation: false
                }
            },
            // legend: {
            //     data: ['温度'],
            //     left: 'left'
            // },
            grid: {
                top: 30,
                left: 25,
                right: 15,
                bottom: 35,
            },

            // grid: {
            //     // left: '3%',
            //     // right: '4%',
            //     // bottom: '3%',
            //     containLabel: true
            // },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
                axisLabel: {
                    rotate: 45,
                    color: '#fff',
                },

                splitLine: {
                    show: false
                },

                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '%VOL',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14,
                    // padding: [0, 0, 0, 10] // 左侧留出空间
                    align: 'center',
                    verticalAlign: 'middle',
                },
                min: function (value) {
                    // return Math.floor(value.min) - 2;
                    return 0
                },
                max: function (value) {
                    // return Math.ceil(value.max) + 2;
                    return 30
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false
                },

                axisLabel: {
                    // rotate: 45,
                    color: '#fff',
                }
            },
            series: [{
                name: '温度',
                type: 'line',
                smooth: true,
                // data: [18, 17, 16, 16, 19, 22, 25, 27, 26, 24, 21, 19],
                // markPoint: {
                //     data: [
                //         { type: 'max', name: '最高温度' },
                //         { type: 'min', name: '最低温度' }
                //     ]
                // },
                // markLine: {
                //     data: [
                //         { type: 'average', name: '平均温度' }
                //     ]
                // },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255, 158, 68, 0.5)' },
                        { offset: 1, color: 'rgba(255, 70, 131, 0)' }
                    ])
                },
                lineStyle: {
                    width: 3,
                    color: '#FF9E44'
                },
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: '#FF9E44',
                    borderColor: '#fff',
                    borderWidth: 2
                }
            }],
            color: ['#FF9E44']
        };
    }

}
</script>